<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Ninja Bot - Trade Results</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <script defer src="/assets/chart.js"></script>
  <style>
    html {
      box-sizing: border-box;
      font-size: 16px;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ol,
    ul {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-family: sans-serif;
    }

    ol,
    ul {
      display: inline-block;
      list-style: none;
    }

    .menu {
      margin: 10px;
    }

    .btn {
      display: inline-block;
      font-family: sans-serif;
      border-radius: 5px;
      padding: 10px 15px;
      text-decoration: none;
      margin: 0;
      color: #252525;
      background-color: #ddd;
      box-shadow: 0 5px 0 0 #ccc;
    }

    .btn:hover {
      background-color: #eee;
    }

    .btn:active {
      transform: translate(0px, 5px);
      -webkit-transform: translate(0px, 5px);
      box-shadow: 0px 1px 0px 0px;
    }

    .blue {
      color: #fff;
      background-color: #55acee;
      box-shadow: 0px 5px 0px 0px #3c93d5;
    }

    .blue:hover {
      background-color: #6fc6ff;
    }

    #graph {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 60px;
    }

    ul {
      width: 100%;
    }

    li {
      display: inline-block;
      list-style-type: none;
      padding-right: 20px;
      float: left;
    }

    li:last-child {
      float: right;
    }
  </style>
  <body>
    <nav class="menu">
      <ul>
        {{range $val := .pairs}}
        <li>
          <a
            class="btn {{if eq $.pair $val}}blue{{end}}"
            href="/?pair={{ $val }}"
            >{{ $val }}</a
          >
        </li>
        {{end}}
        <li>
          <a
                  class="btn"
                  href="/history?pair={{ $.pair }}"
          >History</a>
        </li>
        <li>
          <a
                  class="btn blue"
                  href="/enhanced?pair={{ $.pair }}"
          >✨ Enhanced View</a>
        </li>
      </ul>
    </nav>
    <div id="graph"></div>
  </body>
</html>
